<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>iLEADER</title>
  <link rel="stylesheet" href="../dist/lib/layui/css/layui.css">
  <link rel="stylesheet" href="../dist/lib/swiper/css/swiper.min.css">
  <link rel="stylesheet" href="../dist/css/main.css">
</head>
<body>
<!-- header start -->
<div class="ileader-header">
  <div class="ileader-main layui-clear">
    <a href="index.html" class="logo"><img src="../dist/images/logo.png" alt=""></a>
    <ul class="nav-list">
      <li class="list-item"><a href="#">下载APP</a></li>
      <li class="list-item">
        <form class="layui-form search-box">
          <div class="layui-input-inline">
            <input type="text" name="seachInfo" class="layui-input search-input" placeholder="搜索课程信息" autocomplete="off">
          </div>
          <button class="layui-btn layui-btn-normal search-btn" lay-submit lay-filter="formDemo"></button>
        </form>
      </li>
      <!-- 登录前 -->
      <!--<li class="list-item">-->
      <!--<a href="javascript:;" class="js-header-register">注册</a> / <a href="javascript:;" class="js-header-signIn">登录</a>-->
      <!--</li>-->
      <!--<li class="list-item item-user">-->
      <!--<span class="user-head"><img src="../dist/images/user_head.png" class="" alt=""></span>-->
      <!--</li>-->
      <!-- 登录后 -->
      <li class="list-item list-item-after">
        <a href="m-news.html" class="user-news active">消息</a>
        <a href="m-online-course.html">个人中心</a>
      </li>
      <li class="list-item item-user">
        <span class="user-name">黑眼圈圈</span>
        <span class="user-head"><img src="../dist/images/user_head.png" alt=""></span>
      </li>
    </ul>
  </div>
</div>
<!-- header start-->

<!-- content start-->
<div class="member-wrap">
  <div class="member-main layui-clear">
    <div class="member-left">
      <div class="member-left-hd mb-10">
        <div class="m-user-avatar layui-clear">
          <div class="avatar-pic"><img src="../dist/images/user_avatar.png" alt=""></div>
          <div class="avatar-info">
            <div class="nickname">黑眼圈都合黑眼圈都合</div>
            <a href="javascript:;" class="btn-change-avatar">更改头像</a>
          </div>
        </div>
        <div class="m-user-level">当前级别：Level1</div>
      </div>
      <ul class="member-nav-list">
        <li class="list-item"><a href="m-online-course.html">线上课表</a></li>
        <li class="list-item"><a href="m-live-course.html">直播课表</a></li>
        <li class="list-item active"><a href="m-offline-course.html">线下课表</a></li>
        <li class="list-item"><a href="m-course-comment.html">课程反馈</a></li>
        <li class="list-item"><a href="m-test.html">我的测试</a></li>
        <li class="list-item"><a href="m-collection.html">我的收藏</a></li>
        <li class="list-item"><a href="m-order.html">我的订单</a></li>
        <li class="list-item"><a href="m-personal-info.html">个人信息</a></li>
        <li class="slide-bar"></li>
      </ul>
    </div>
    <div class="member-right">
      <div class="member-main-bar mb-10">
        <span class="marks"><i class="icon icon-offline"></i>线下课表</span>
      </div>
      <div class="member-main-container">
        <ul class="m-offline-class layui-clear" id="offlineContent"></ul>
        <script type="text/html" id="offlineTemp">
          {{#  layui.each(d, function(index, item){ }}
          <li class="list-item">
            <div class="item-hd">
              <div class="item-title">{{item.title}}</div>
            </div>
            <div class="item-bd">
              <div class="item-position">地址：{{item.position}}</div>
              <div class="item-date">开始时间：2019-01-20（19:00）</div>
              <div class="item-date">结束时间：01-21（20:00）</div>
              <div class="item-status">
                <span class="status-b">状态</span>
                {{#  if(item.status == 0){ }}
                <span class="status">：未预约</span>
                {{#  } else { }}
                <span class="status">：已预约</span>
                {{#  } }}
              </div>

              {{#  if(item.status == 0){ }}
              <a href="javascript:;" class="layui-btn layui-btn-radius btn-book js-booking" data-id="{{item.id}}">预约</a>
              {{#  } else { }}
              <a href="javascript:;" class="layui-btn layui-btn-radius btn-book disabled">已预约</a>
              {{#  } }}
            </div>
          </li>
          {{#  }); }}
          {{#  if(d.length === 0){ }}
          <div class="error-page">
            <div class="page-inner">
              <div class="bg"></div>
              <p>暂无内容!</p>
            </div>
          </div>
          {{#  } }}
        </script>
      </div>

      <!-- 分页 -->
      <div class="ileader-page pt-10 pb-10 s-tr" id="offlinePage"></div>
    </div>
  </div>
</div>
<!-- content end-->

<!-- footer start-->
<div class="footer-warp">
  <div class="footer-nav">
    <a href="#">关于我们</a>
    <a href="#">联系我们</a>
    <a href="#">帮助中心</a>
    <a href="javascript:;" class="ewm-link">
      <span>订阅号</span>
      <div class="ewm-box">
        <p>扫描二维码关注<br>iLeader微信服务号</p>
        <img src="../dist/images/ewm.png" alt="">
      </div>
    </a>
  </div>
  <div class="copyright">京ICP证030173号-1   京网文【2013】0934-983号     ©2019Baidu</div>
</div>
<!-- footer end-->

<script src="../dist/lib/jquery.min.js"></script>
<script src="../dist/lib/layui/layui.js"></script>
<script src="../dist/js/popup_all.js"></script>
<script src="../dist/js/m_all.js"></script>
<script>
  layui.use(['laypage', 'layer', 'laytpl'], function(){
    var laypage = layui.laypage,
        layer = layui.layer,
        laytpl = layui.laytpl;

    (function () {
      initPage();
    })()

    function initPage(pageConfig) {
      if (!pageConfig) {
        pageConfig = {};
        pageConfig.pageSize = 2;
        pageConfig.currentPage = 1;
      }
      $.ajax({
        url: '../data/list.json',
        dataType: 'json',
        type: 'get',
        data: pageConfig,
        success: function (response) {
          var data = response.data;

          if (data.count == 0) {
            $('#offlinePage').remove();
          }

          laypage.render({
            elem: 'offlinePage',
            count: data.count,
            curr: pageConfig.currentPage,
            limit: pageConfig.pageSize,
            first: "首页",
            last: "尾页",
            jump: function (obj, first) {
              if (!first) {
                pageConfig.currentPage = obj.curr;
                pageConfig.pageSize = obj.limit;
                initPage(pageConfig);
              }
            }
          });

          // 填充
          laytpl($('#offlineTemp').html()).render(data.list, function (html) {
            $('#offlineContent').html(html);
          });

          // 预约
          $('.js-booking').on('click', function () {
            var $this = $(this);
            var _id = $this.data('id');
            $.post('', {id: _id}, function(response){
              if (response.status == 1) {
                layer.msg(response.msg, function(){
                  $this.parents('.list-item').find('.status').text('：已预约')
                  $this.parents('.list-item').find('.btn-book').removeClass('js-booking').addClass('disabled')
                });
              }else{
                layer.msg(response.msg);
              }
            });
          });
        }
      });
    }
  });
</script>
</body>
</html>